<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="dist/echarts.min.js"></script>

<body>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            overflow: hidden;
            
        }

        #main {
            width: 80%;
            height: 90%;
            background: rgba(0, 0, 0, 0);
        }
    </style>

    <div id="main"></div>

    <script type="text/javascript">

        var myChart = echarts.init(document.getElementById('main'));
        var option;
        
        myChart.showLoading({

            text: 'Wait Loading Chart',
            color: '#ff33cc',
            textColor: '#fff',
            maskColor: 'rgba(0,0,0,0)',
            zlevel: 5,

            });

        var items = new Array();
        var valuesA = new Array();
        var maxValues = new Array();
        var floatI100 = true;

        var datas = new Array();
        var indicators = new Array();
        var valueNames = new Array();

        function AnaysIndicator() {
            for (let i = 0; i < items.length; i++) {
                var d = { name: items[i], max: maxValues[i] }
                indicators[i] = d;
            }
        };

        function SetValue() {

            ue.obj.setchartitem().then(function (ReturnValue) {
                items = ReturnValue;
            });

            ue.obj.setcharfloati100().then(function (ReturnValue) {
                floatI100 = ReturnValue;
            });

            ue.obj.setchartvaluea().then(function (ReturnValue) {
                valuesA = ReturnValue;
            });

            ue.obj.setchartmaxvalue().then(function (ReturnValue) {
                maxValues = ReturnValue;
            });

            if (floatI100) {

                for (let i = 0; i < valuesA.length; i++) {
                    var ix = valuesA[i] / 100;
                    valuesA[i] = ix;
                }

                for (let i = 0; i < maxValues.length; i++) {
                    var ix = maxValues[i] / 100;
                    maxValues[i] = ix;
                }

            }
        }

        function SetOption() {
        
            option = {

                tooltip: {
                    // trigger: 'item',
                    // formatter: '{a} <br/>{b}: {c} ({d}%)'

                },

                legend: {
                    data: "test"
                },

                radar: {
                    name: {
                        textStyle: {
                            color: '#fff',
                            //backgroundColor: '#999',
                            borderRadius: 10,
                            padding: [6, 10]
                        }
                    },

                    indicator: indicators

                },

                series: [
                    {
                        type: 'radar',
                        data: [{ value: valuesA, name: "----" }]
                    }
                ]
            };

            window.addEventListener("resize", function () {
                myChart.resize();
            })
        }

        setInterval(function () {
            SetValue();
            AnaysIndicator();

            SetOption();
            
            myChart.setOption(option);
            myChart.hideLoading();
        }, 1000);

    
    </script>

</body>

</head>